//https://blog.csdn.net/zl1zl2zl3/article/details/81357146
import {PureComponent } from 'react';
import {
	Row,
	Col,
	Form,
	Input,
	Select,
	Modal,
} from 'antd';

import SelectDeptTree from '@/components/SelectDeptTree';
import SelectOrganTree from '@/components/SelectOrganTree';

const FormItem = Form.Item;
const { Option } = Select;


// 修改表单
@Form.create()
class UpdateForm extends PureComponent {
	static defaultProps = {
		handleUpdate: () => {},
		handleUpdateModalVisible: () => {},
		values: {},
	};

	constructor(props) {
		super(props);
		this.state = {
			formVals: {
				user_id: props.values.user_id,
				user_name: props.values.user_name,
				user_name_cn: props.values.user_name_cn,
				password: props.values.password,
				email: props.values.email,
				phone: props.values.phone,
				enabled: props.values.enabled,
				auth_ids: props.values.auth_ids,
				dept_id: props.values.dept_id,
				dept: props.values.dept,
				post_id: props.values.post_id,
				post_name: props.values.post_name
			},
			getDeptTreeBySelectTree: "",
			getOrganTreeBySelectTree: "",
		};

	}
	
	handleConfirmBlur = e => {
	    const { value } = e.target;
	    this.setState({ confirmDirty: this.state.confirmDirty || !!value });
	};

	compareToFirstPassword = (rule, value, callback) => {
	    const { form } = this.props;
	    if (value && value !== form.getFieldValue('password')) {
	      callback('两次输入的密码不一致!');
	    } else {
	      callback();
	    }
	};

	validateToNextPassword = (rule, value, callback) => {
	    const { form } = this.props;
	    if (value && this.state.confirmDirty) {
	      form.validateFields(['confirm'], { force: true });
	    }
	    callback();
	}

	selectedDeptTreeValue = (deptRecord) => {
		this.setState({
			getDeptTreeBySelectTree: deptRecord
		})
	}

	selectedOrganTreeValue = (orgRecord) => {
		this.setState({
			getOrganTreeBySelectTree: orgRecord
		})
	}

	handleLocalUpdate = () => {
		const { form,handleUpdate } = this.props;
		const { getDeptTreeBySelectTree } = this.state;
		const { formVals: oldValue } = this.state;
		form.validateFields((err, fieldsValue) => {
			if(err) return;
			const formVals = { ...oldValue,
				...fieldsValue
			};
			this.setState({
				formVals,
			});
			if(getDeptTreeBySelectTree) {
				formVals.dept_id = getDeptTreeBySelectTree.triggerNode.props.dataRef.dept_id;
				formVals.dept = getDeptTreeBySelectTree.triggerNode.props.dataRef.title;
			}
			
			if(formVals.post) {
				formVals.post_id = formVals.post.key;
				formVals.post_name = formVals.post.label;
			}
			
			handleUpdate(formVals);

		});
	};

	renderContent = (formVals, parentDeptTreeMethod, parentOrganTreeMethod) => {
		const { form,authForUser,postForUser } = this.props;

return(
<Form  layout="vertical">


	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>

        <Col  md={12} sm={24}>
	        <FormItem  label="用户名">
	            {form.getFieldDecorator('user_name', {
	            rules: [{ required: true, message: '请输入至少2个字符的用户名！', min: 2 }],
	            initialValue: formVals.user_name,
	            })(<Input placeholder="请输入" />)}
	        </FormItem>
        </Col>


        <Col  md={12} sm={24}>
	        <FormItem  label="用户名称">
	            {form.getFieldDecorator('user_name_cn', {
	            rules: [{ required: true, message: '请输入至少2个字符的用户名称！', min: 2 }],
	            initialValue: formVals.user_name_cn,
	            })(<Input placeholder="请输入" />)}
	        </FormItem>
        </Col>

    </Row>
    
        
    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
        
        <Col  md={12} sm={24}>
	        <FormItem  label="密码" hasFeedback>
	            {form.getFieldDecorator('password', {
		            rules: [
	            		{ required: true, message: '请输入至少6个字符的密码！', min: 6 },
	            		{
			              validator: this.validateToNextPassword,
			            },
		            ],
		            initialValue: (formVals.password).slice(0,6),
	            })(<Input.Password placeholder="请输入" />)}
	        </FormItem>
        </Col>
        
        <Col  md={12} sm={24}>
	        <FormItem  label="确认密码" hasFeedback>
	            {form.getFieldDecorator('confirm', {
		            rules: [
		            		{ required: true, message: '请确认您的密码！'},
		            		{
				                validator: this.compareToFirstPassword,
				            },
		            ],
		            initialValue: (formVals.password).slice(0,6),
	            })(<Input.Password placeholder="请输入" onBlur={this.handleConfirmBlur} />)}
	        </FormItem>
        </Col>
   
    </Row>
    
    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>

        <Col  md={12} sm={24}>
	        <FormItem  label="手机号">
	            {form.getFieldDecorator('phone', {
	            rules: [{ required: false, message: '手机号码格式不符！',  pattern:/^1(3|4|5|6|7|8|9)\d{9}$/ }],
	            initialValue: formVals.phone,
	            })(<Input placeholder="请输入" />)}
	        </FormItem>
        </Col>


        <Col  md={12} sm={24}>
	        <FormItem  label="邮箱">
	            {form.getFieldDecorator('email', {
	            rules: [{ required: false}],
	            initialValue: formVals.email,
	            })(<Input placeholder="请输入" />)}
	        </FormItem>
        </Col>

    </Row>

   <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
   
		<Col  md={12} sm={24}>
            <FormItem  label="部门">
            	{form.getFieldDecorator('dept_name')(
                    <SelectDeptTree {...parentDeptTreeMethod} deptValues={formVals.dept}/>
                )}
            </FormItem>
        </Col>
        
		<Col md={12} sm={24}>
	        <FormItem label="岗位">
	            {form.getFieldDecorator('post',{
	            	initialValue: { key: formVals.post_id,label: formVals.post_name },
	            })(
	                <Select labelInValue placeholder="请选择" style={{ width: '100%' }}>
	                	{postForUser != undefined?postForUser.list.map((item,index) => {
	                		return <Option value={item.id}>{item.post_name}</Option>
	                	}):null}
	                </Select>
	            )}
	        </FormItem>
        </Col>

    </Row>
   <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
   
   		<Col md={12} sm={24}>
	        <FormItem label="状态">
	            {form.getFieldDecorator('enabled',{
	            	initialValue: formVals.enabled + "",
	            })(
	                <Select placeholder="请选择" style={{ width: '100%' }}>
	                		<Option value="1">激活</Option>
	                    <Option value="0">锁定</Option>
	                </Select>
	            )}
	        </FormItem>
        </Col>
   		<Col md={12} sm={24}>
	        <FormItem label="角色">
	            {form.getFieldDecorator('auth_ids',{
	            	initialValue: formVals.auth_ids,
	            })(
	                <Select placeholder="请选择" style={{ width: '100%' }} mode="multiple">
	                	{authForUser != undefined?authForUser.list.map((item,index) => {
	                		return <Option value={item.auth_id}>{item.auth_name}</Option>
	                	}):null}
	                </Select>
	            )}
	        </FormItem>
        </Col>

    </Row>

</Form>
);

};

	render() {
		const {
			updateModalVisible,
			handleUpdateModalVisible,
			values,
			dispatch,
			selectDeptTree,
			selectOrganTree,
			requestModelName,
		} = this.props;
		const {
			formVals
		} = this.state;
		const parentDeptTreeMethod = {
			dispatch: dispatch,
			selectDeptTree: selectDeptTree,
			selectedDeptTreeValue: this.selectedDeptTreeValue,
			requestModelName: requestModelName,
		}

		const parentOrganTreeMethod = {
			dispatch: dispatch,
			selectOrganTree: selectOrganTree,
			selectedOrganTreeValue: this.selectedOrganTreeValue,
			requestModelName: requestModelName,
		}

		return(
			<Modal
    width={800}
    bodyStyle={{ padding: '32px 40px 48px' }}
    destroyOnClose
    title="修改"
    visible={updateModalVisible}
    onOk={() => this.handleLocalUpdate()}
    onCancel={() => handleUpdateModalVisible(false, values)}
    afterClose={() => handleUpdateModalVisible()}
>

    {this.renderContent(formVals,parentDeptTreeMethod,parentOrganTreeMethod)}
</Modal>
		);
	}

}

export default UpdateForm;